﻿<!DOCTYPE html>
<html>
<head>
	<title>Maxstore</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="mô tả" />
	<meta name="keywords" content="từ khóa" />
	<meta name="robots" content="noodp,index,follow" />
	<meta http-equiv="content-language" content="vi" />
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
	<!--CSS-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
	<link rel="stylesheet" type="text/css" href="css/skin.css" />
	<!--JAVASCIPT-->
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
     <script type="text/javascript" src="js/jquery.selectBox.js"></script>
     <script src="js/prettyCheckable.js"></script>
	<script type="text/javascript"><!--Main-slide-->
		$(document).ready(function(){		
			$('.sidebar-slide img, .control-slide img').click(function(){
				$('.act').removeClass('act');
				$(this).addClass('act');
				$('.main-content-slide a').fadeOut(2000);
				var show=$(this).attr('alt');
				$("#"+show).fadeToggle(1000);
			});
			$('.detail-slide img').click(function(){
				$('.act').removeClass('act');
				$(this).addClass('act');
				$('.main-detail-slide a').fadeOut(500);
				var show=$(this).attr('alt');
				$("#"+show).fadeToggle(500);
			});	
			$("select.select_size_color").selectBox();
            $("select.select_price").selectBox();
			$("select.select_show").selectBox();
            $('input.myClass').prettyCheckable({
                color: 'gray'
              });	
		});
	</script>
	
	<script type="text/javascript"><!--Prod-slide-->
		function mycarousel_initCallback(carousel)
		{
			// Disable autoscrolling if the user clicks the prev or next button.
			carousel.buttonNext.bind('click', function() {
				carousel.startAuto(0);
			});

			carousel.buttonPrev.bind('click', function() {
				carousel.startAuto(0);
			});

			// Pause autoscrolling if the user moves with the cursor over the clip.
			carousel.clip.hover(function() {
				carousel.stopAuto();
			}, function() {
				carousel.startAuto();
			});
		};

		jQuery(document).ready(function() {
			jQuery('#slide-show, #slide-show2').jcarousel({
				auto: 0,
				wrap: 'last',
				initCallback: mycarousel_initCallback
			});
			$('.jcarousel-prev, .jcarousel-next').css('display','block');
		});
	</script>
</head>

<body>
	<div id="header"><!--Header-->
		<form class="container">
			<div class="row-fluid">
				<div class="logo span4">
					<img src="images/logo-head.png" alt=""/>
				</div>
				
				<div class="search span5">
					<input type="text" name="search" class="txt-search" placeholder="Search ..."/>
					<input type="submit" name="submit" class="txt-submit"/>
				</div> 
				
				<div class="login span3">
					<p><a href="#">Sign in</a> | <a href="#">Login</a></p>
				</div>
			</div>
		</form>
	</div><!--End Header-->
	
	<div id="navigation"><!--Navigation-->
		<div class="container">
			<div class="row-fluid">
				<ul class="nav nav-pills span9">
					<li class="active"><a href="#">WOMEN</a></li>
					<li><a href="#">MEN</a></li>
					<li><a href="#">KIDS</a></li>
					<li><a href="#">FASHION</a></li>
					<li><a href="#">COLLECTION</a></li>
				</ul>
				
				<div class="cart-small span3">
					<p><a href="#"><img src="images/icon-cart.png" alt=""/></a> <span>0</span> ITEM / <span>$ 0</span></p>
				</div>
			</div>
		</div>
	</div><!--End Navigation-->
    <form class="container">
	<div class="row-fluid bread_container">
    	
    	<div class="span12">
            <ul class="breadcrumb">
                <li><a href="#">HOME</a> <span class="divider"></span></li>
                <li><a href="#">WOMEN</a> <span class="divider last"></span></li>
                <li class="active">SHIRTS & BLOUSES</li>
            </ul>
        </div>
        
	</div>
    </form>
    
    <form class="container">
    	<div class="row-fluid DetailContainer">
        	<div class="img_slide span5">
            	<div class="main-detail-slide">
					<a href="http://google.com.vn/" id="a">
						<img src="images/img_detail.jpg" alt=""/>
					</a>
					<a target="_bank" href="http://facebook.com.vn/" id="b">
						<img src="images/img_detail2.jpg" alt=""/>
					</a>
					<a href="#" id="c">
						<img src="images/img_detail.jpg" alt=""/>
					</a>
                    <a href="#" id="d">
						<img src="images/img_detail2.jpg" alt=""/>
					</a>
				</div>
				
				<div class="detail-slide">
					<img id="1" class="act" src="images/thumb_img_detail.jpg" alt="a"/>
					<img id="2" src="images/thumb_img_detail.jpg" alt="b"/>
					<img id="3" src="images/thumb_img_detail.jpg" alt="c"/>
                    <img id="4" src="images/thumb_img_detail.jpg" alt="d"/>
				</div>
            </div>
            <div class="pro-info span7">
            	<div class="info_and_cart">
                	<div class="name_cate">
                    	<h4>Formal Dress</h4>
                        <div class="fb-like"><img src="images/fb-like.jpg" alt=""/></div>
                    </div>
                    
                    <div class="name_sum_pro">
                    	<h1>Notch-collar shirt</h1>
                        <p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris.</p>
                        <p class="price">$49.90 <span>$72.00</span></p>
                    </div>
                    
                    <div class="chose_size_color">
                    	<div class="row-fluid chose_inner">
                        	<div class="span6 chose_size">
                            	<label>AVAILABLE SIZE : </label>
                                <select class="select_size_color">
                                	<option>Please select</option>
                                    <option>M</option>
                                    <option>L</option>
                                </select>
                            </div>
                            <div class="span6 chose_color">
                            	<label>COLOR : </label>
                                <select class="select_size_color">
                                	<option>CORAL REEF</option>
                                    <option>CORAL REEF</option>
                                    <option>CORAL REEF</option>
                                </select>
                            </div>
                          
                        </div>
                    </div>
                    <div class="chose_inner">
                        <div class="chose_quantity">
                                    <label>QUANTITY : </label>
                                    <select class="select_size_color">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                    </select>
                        </div>
                    </div>
                    
               		<div class="add_to_cart">
                        <a href="#" class="add_cart_btn"></a>
                        <p>or <a href="#" class="add_to_wish">Add to Wishlist</a></p>
                	</div>
                    
                    <div class="share">
                    	<div class="link">
                            <a href="#" class="twitter"></a>
                            <a href="#" class="facebook"></a>
                            <a href="#" class="print"></a>
                            <a href="#" class="mail"></a>
                            <a href="#" class="google"></a>
                        </div>
                    </div>
                    
                </div>
                
                <div class="quick_view">
                	<h5>Quick overview </h5>
                    
                    	<p>Long sleeves with single button cuffs.</p>
                        <p>Cuffs can be rolled up and secured with button-tabs.</p>
                        <p>Standing collar with notched detailing.</p>
                        <p>Front button placket.</p>
                        <p>Patch pocket on chest.</p>
                        <p>Hem is longer in back.</p>
                    
                </div>
                
                
            </div>
        </div> 
    </form>
    
	<div class="slide-show-prod"><!--Slide show prod-->
		<form class="container">
			<h2>YOU MIGHT ALSO LIKE</h2>
			<ul id="slide-show" class="jcarousel-skin-tango">
				<li class="prod-item first span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
				<li class="prod-item span3">
					<img src="images/prod-img1.jpg" alt=""/>
					<h3>CN Clogs Beach/Garden Clog</h3>
					<p>Comfortable and fun to wear these clogs are the latest trend in fash</p>
					<p><span>+Add to wishlist</span><a href="#" class="btn-cart">$ 76.00</a></p>
				</li>
			</ul>
		</form>
	</div><!--End Slide show prod-->
	
	
	<div id="loved-by"><!--Loved by-->
		<div class="container">
			<div class="row-fluid">
				<div class="block-left span2">
					<h2>Loved by</h2>
				</div>
				
				<div class="block-right span10">
					<div class="row-fluid">
						<a href="#" class="logo-loved-by span3"></a>
						<a href="#" class="logo-loved-by span3"></a>
						<a href="#" class="logo-loved-by span3"></a>
						<a href="#" class="logo-loved-by span3"></a>
					</div>
				</div>
			</div>
		</div>
	</div><!--End loved by-->
	
	<div id="footer"><!--footer-->
		<div class="container">
			<div class="row-fluid">
				<div class="block-footer span4">
					<div class="row-fluid">
						<div class="span6">
							<h4>New Arrivals</h4>
							<ul>
								<li>Clothing</li>
								<li>Shoes</li>
								<li>Bags</li>
								<li>Accessories</li>
								<li>Zimmermann</li>
								<li>Acne</li>
								<li>Bassike</li>
								<li>Camilla and Marc</li>
							</ul>
						</div>
						<div class="span6">
							<h4>Brands we sell</h4>
							<ul>
								<li>Elle</li>
								<li>Reallxe</li>
								<li>Fabric</li>
								<li>Mayflower</li>
								<li>Levis Strauss</li>
								<li>Anzonica</li>
								<li>Reallxe</li>
								<li>Fabric</li>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="block-footer span4">
					<div class="row-fluid">
						<div class="span6">
							<h4>New Arrivals</h4>
							<ul>
								<li>Clothing</li>
								<li>Shoes</li>
								<li>Bags</li>
								<li>Accessories</li>
								<li>Zimmermann</li>
								<li>Acne</li>
								<li>Bassike</li>
								<li>Camilla and Marc</li>
							</ul>
						</div>
						<div class="span6">
							<h4>Brands we sell</h4>
							<ul>
								<li>Elle</li>
								<li>Reallxe</li>
								<li>Fabric</li>
								<li>Mayflower</li>
								<li>Levis Strauss</li>
								<li>Anzonica</li>
								<li>Reallxe</li>
								<li>Fabric</li>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="block-footer wide span4">
					<div class="row-fluid">
						<div class="shipping">
							<h3>True Fact</h3>
							<h2>FREE SHIPPING</h2>
							<p>for purchases above $200</p>
						</div>
						<div class="contact">
							<h3>1.800. (1.800.260.7890)</h3>
							<p><img src="images/icon-6.png" alt=""/><img src="images/icon-7.png" alt=""/><img src="images/icon-8.png" alt=""/></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!--End loved by-->
	
	<div id="copy-right"><!--copy-right-->
		<div class="container">
			<div class="row-fluid">
				<div class="block-left span6">
					<p>Copyright &copy; 2013 MaxStore. All Rights Reserved.</p>
				</div>
				
				<div class="block-right span6">
					<p><a href="#"><img src="images/icon-10.png" alt=""/></a><a href="#"><img src="images/icon-11.png" alt=""/></a><a href="#"><img src="images/icon-12.png" alt=""/></a><a href="#"><img src="images/icon-13.png" alt=""/></a><a href="#"><img src="images/icon-14.png" alt=""/></a><a href="#"><img src="images/icon-15.png" alt=""/></a></p>
				</div>
			</div>
		</div>
	</div><!--End copy-right-->
</body>
</html>















































